<template>
    <div>
        <h1>test</h1>
        <el-button @click="testforceupdate">测试$forceUpdate</el-button>
        <reset-a></reset-a>

        <reset-b>
            <h1>上课注意听讲</h1>
        </reset-b>

        <el-button @click="show = !show">v-if 强制刷新</el-button>
        <Reset-vif v-if="show"></Reset-vif>

        <hr /> 
        <Reset-key :key="initKey" ResetKey="ResetKey"></Reset-key>

        <el-button>input fileReader</el-button>
        <input-fileReader></input-fileReader>
    </div>
</template>

<script>
import ResetA from "@/components/TestReset/ResetA";
import ResetB from "@/components/TestReset/ResetB";
import ResetVif from "@/components/TestReset/ResetVif";
import ResetKey from "@/components/TestReset/ResetKey";
import InputFileReader from "@/components/TestReset/InputFileReader";
/*
$forceUpdate不能触发所有的生命周期钩子函数 只能触发beforeUpdate updated
在使用了$forceUpdate的父组件中有子组件 子组件会刷新吗？能否触发生命周期
$forceUpdate 不能触发不带插槽的子组件的重新渲染 能触发带有插槽的子组件的重新渲染

v-if 使用它做组件强制刷新时能触发所有的生命周期钩子函数 是真正意义上的销毁与重建所以消耗比较大
弊端：闪屏  所以强制刷新的时候不建议使用

key 使用它做组件强制刷新时能触发所有的生命周期钩子函数
key 是一个唯一的标识 不能重复 重复的key会造成渲染错误 修改key建议修改为Symbol 它不会闪屏
*/
    export default {
        data(){
            return{
                show:true,
                initKey:"yanshengnan",
            }
        },
        methods:{
            testforceupdate(){
                this.$forceUpdate();
            },
            ResetKey(key){
                this.initKey = key;
            }
        },
        beforeCreate(){
            console.log("A beforeCreate")
        },
        created(){
            console.log("A created")
        },
        beforeMount(){
            console.log("A beforeMount")
        },
        mounted(){
            console.log("A mounted")
        },
        beforeUpdate(){
            console.log("A beforeUpdate")
        },
        updated(){
            console.log("A updated")
        },
        beforeDestroy(){
            console.log("A beforeDestroy")
        },
        destroyed(){
            console.log("A destroyed")
        },
        components:{
            ResetA,
            ResetB,
            ResetVif,
            ResetKey,
            InputFileReader,
        },
        
    }
</script>

<style lang="scss" scoped>
    div{
        height: 150px;
    }
</style>